/**
 * 布局页
 * Created by Administrator on 2017/10/13.
 */
import React from "react";
import {connect} from 'dva';
import {TabBar, Icon} from 'antd-mobile';
import Infor from '../Infor/index';
import News from '../News/index';
import Work from '../Work/index';
import Study from '../Work/Zxxx/zxxx';
import Mine from '../Mine/index';
import style from "./layout.less";

const Item = TabBar.Item;
class Layout extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      isFirst: true,
    };
  }

  renderContent = (tabBar) => {
    this.props.dispatch({
      type: 'layout/saveTabBar',
      payload: {tabBar}
    });
    switch (tabBar) {
      case 'infor':
        console.log('infor');
        this.props.dispatch({//资讯
          type: 'infor/partyConTrend',
          payload: {}
        });
        break;
      case 'news':
        console.log('news');
        break;
      case 'party':
        console.log('party');
        break;
      case 'study':
        console.log('study');
        break;
      case 'mine':
        console.log('mine');
        this.props.dispatch({  //个人信息
          type: 'mine/getPersonInfo',
          payload: {}
        });
        break;
    }
  };

  render(){
    const {tabBar} = this.props.layout;
    return(
      <div className="layout">
        <TabBar
          //选中的字体颜色
          tintColor="#ff0000"
          //未选中的字体颜色
          unselectedTintColor="#C7C7CD"
        >
          <Item
            key="首页"
            title="首页"
            selected={tabBar == 'infor'}
            icon ={<Icon size="md" type={require('../../svgs/home/shouye.svg')} />}
            selectedIcon={<Icon size="md" type={require('../../svgs/home/shouye1 (1).svg')} />}
            onPress={() => {
              this.renderContent('infor');
            }}
          >
            <Infor/>


          </Item>
          <Item
            key="消息"
            title="消息"
            selected={tabBar == 'news'}
            icon={<Icon size="lg" type={require('../../svgs/home/xiaoxi1.svg')} />}
            selectedIcon={<Icon size="lg" type={require('../../svgs/home/xiaoxi2.svg')} />}
            onPress={() => {
              this.renderContent('news');
            }}
          >
            <News/>
          </Item>
          <Item
            key="工作台"
            title=""
            selected={tabBar == 'party'}
            icon={
              <div style={{ backgroundColor:'#dd504c', width:'1.25rem', height:'1rem', justifyContent: 'center', alignItems: 'center', borderRadius:'10%'}}>
                <div className={style.party_margin_top}>
                  <Icon type={require('../../svgs/home/layout/party.svg')} />
                </div>
                {/*<span className={style.party_font_size}>工作台</span>*/}
              </div>
            }
            selectedIcon={
              <div style={{ backgroundColor:'#ff0000', width:'1.25rem', height:'1rem', justifyContent: 'center', alignItems: 'center', borderRadius:'10%'}}>
                <div className={style.party_margin_top}>
                  <Icon type={require('../../svgs/home/layout/party.svg')} />
                </div>
                {/*<span className={style.party_font_size}>工作台</span>*/}
              </div>
            }
            onPress={()=>{
              this.renderContent('party');
            }}
          >
            <Work/>
          </Item>
          <Item
            key="学习"
            title="学习"
            selected={tabBar == 'study'}
            icon={<Icon size="lg" type={require('../../svgs/home/layout/study.svg')} />}
            selectedIcon={<Icon size="lg" type={require('../../svgs/home/layout/study_s.svg')} />}
            onPress={() => {
              this.renderContent('study');
            }}
          >
            <Study/>
          </Item>
          <Item
            title="我的"
            key="我的"
            selected={tabBar === 'mine'}
            icon={<Icon size="md" type={require('../../svgs/home/layout/mine.svg')}   />}
            selectedIcon={<Icon size="md" type={require('../../svgs/home/layout/mine_s.svg')} />}
            onPress={() => {
              this.renderContent('mine');
            }}
          >
            <Mine/>
          </Item>
        </TabBar>
      </div>
    )
  }
  componentDidMount() {
    if(this.state.isFirst){
      this.props.dispatch({// 初始进来加载资讯
        type: 'infor/partyConTrend',
        payload: {}
      });
      this.setState({
        isFirst:false
      })
    }
  }
}

function mapStateToProps({layout}){
  return {layout};
}
export default connect(mapStateToProps)(Layout);
